<!-- 家教列表页面 -->
<template>
    <div class="tutoring-list">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>家教列表</span>
                    <el-input
                        v-model="searchKeyword"
                        placeholder="搜索家教信息"
                        style="width: 200px"
                        @input="handleSearch"
                    >
                        <template #prefix>
                            <el-icon><Search /></el-icon>
                        </template>
                    </el-input>
                </div>
            </template>

            <el-row :gutter="20">
                <el-col :span="8" v-for="item in filteredTutorings" :key="item.id">
                    <el-card class="tutoring-card" shadow="hover">
                        <template #header>
                            <div class="tutoring-header">
                                <el-avatar :src="item.teacherAvatar" />
                                <span class="teacher-name">{{ item.teacherName }}</span>
                            </div>
                        </template>
                        <h3>{{ item.title }}</h3>
                        <p class="description">{{ item.description }}</p>
                        <div class="info-item">
                            <el-icon><Notebook /></el-icon>
                            <span>科目：{{ item.subjects }}</span>
                        </div>
                        <div class="info-item">
                            <el-icon><School /></el-icon>
                            <span>适合层次：{{ item.targetLevel }}</span>
                        </div>
                        <div class="info-item">
                            <el-icon><Money /></el-icon>
                            <span>课时费：¥{{ item.hourlyRate }}/小时</span>
                        </div>
                        <div class="info-item">
                            <el-icon><Location /></el-icon>
                            <span>授课地点：{{ item.location }}</span>
                        </div>
                        <div class="info-item">
                            <el-icon><Timer /></el-icon>
                            <span>可用时间：{{ item.availableTime }}</span>
                        </div>
                        <div class="teacher-info-header" @click="toggleTeacherInfo(item)">
                            <h4>教师认证信息</h4>
                            <el-icon>
                                <ArrowDown v-if="!item.showTeacherInfo" />
                                <ArrowUp v-else />
                            </el-icon>
                        </div>
                        <div class="teacher-info" v-if="item.showTeacherInfo">
                            <div class="info-item">
                                <el-icon><User /></el-icon>
                                <span>姓名：{{ item.teacherRealName }}</span>
                            </div>
                            <div class="info-item">
                                <el-icon><Reading /></el-icon>
                                <span>学历：{{ item.education }}</span>
                            </div>
                            <div class="info-item">
                                <el-icon><Collection /></el-icon>
                                <span>专业：{{ item.major }}</span>
                            </div>
                            <div class="info-item">
                                <el-icon><School /></el-icon>
                                <span>学校：{{ item.school }}</span>
                            </div>
                            <div class="info-item">
                                <el-icon><Location /></el-icon>
                                <span>所在地区：{{ item.province }}</span>
                            </div>
                        </div>
                        <div class="actions">
                            <el-button 
                                type="primary" 
                                @click="showBookingDialog(item)"
                                :disabled="userRole === 1"
                            >
                                预约
                            </el-button>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-card>

        <!-- 预约对话框 -->
        <el-dialog v-model="bookingDialogVisible" title="预约家教" width="500px">
            <el-form :model="bookingForm" :rules="bookingRules" ref="bookingFormRef" label-width="100px">
                <el-form-item label="开始时间" prop="startTime">
                    <el-date-picker
                        v-model="bookingForm.startTime"
                        type="datetime"
                        placeholder="选择开始时间"
                    />
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime">
                    <el-date-picker
                        v-model="bookingForm.endTime"
                        type="datetime"
                        placeholder="选择结束时间"
                    />
                </el-form-item>
                <el-form-item label="上课地点" prop="location">
                    <el-input v-model="bookingForm.location" placeholder="请输入上课地点" />
                </el-form-item>
                <el-form-item label="具体要求" prop="requirements">
                    <el-input
                        v-model="bookingForm.requirements"
                        type="textarea"
                        placeholder="请输入具体要求"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="bookingDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitBooking">提交预约</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { Search, Notebook, School, Money, Location, Timer, User, Reading, Collection, ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { tutoringService } from '@/api/tutoring'
import useUserInfoStore from '@/stores/userInfo'

const userInfoStore = useUserInfoStore()
const userRole = computed(() => Number(userInfoStore.info.role))

const tutorings = ref([])
const searchKeyword = ref('')
const bookingDialogVisible = ref(false)
const bookingFormRef = ref(null)
const currentTutoring = ref(null)

const bookingForm = ref({
    startTime: '',
    endTime: '',
    location: '',
    requirements: '',
    tutoringId: null
})

const bookingRules = {
    startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
    endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
    location: [{ required: true, message: '请输入上课地点', trigger: 'blur' }]
}

// 获取所有家教信息
const getAllTutoring = async () => {
    try {
        const response = await tutoringService.getAllTutoring()
        tutorings.value = response.data.map(item => ({
            ...item,
            showTeacherInfo: false // 默认不展开教师认证信息
        }))
    } catch (error) {
        ElMessage.error('获取家教信息失败')
    }
}

// 切换教师认证信息的展示状态
const toggleTeacherInfo = (item) => {
    item.showTeacherInfo = !item.showTeacherInfo
}

// 过滤家教信息
const filteredTutorings = computed(() => {
    if (!searchKeyword.value) return tutorings.value
    const keyword = searchKeyword.value.toLowerCase()
    return tutorings.value.filter(item => 
        item.title.toLowerCase().includes(keyword) ||
        item.description.toLowerCase().includes(keyword) ||
        item.subjects.toLowerCase().includes(keyword) ||
        item.teacherName.toLowerCase().includes(keyword)
    )
})

// 显示预约对话框
const showBookingDialog = (tutoring) => {
    currentTutoring.value = tutoring
    bookingForm.value.tutoringId = tutoring.id
    bookingDialogVisible.value = true
}

// 提交预约
const submitBooking = async () => {
    if (!bookingFormRef.value) return
    
    await bookingFormRef.value.validate(async (valid) => {
        if (valid) {
            try {
                await tutoringService.createBooking(bookingForm.value)
                ElMessage.success('预约提交成功，等待教师确认')
                bookingDialogVisible.value = false
                bookingFormRef.value.resetFields()
            } catch (error) {
                ElMessage.error(error.response?.data?.message || '预约失败')
            }
        }
    })
}

// 搜索处理
const handleSearch = () => {
    // 使用计算属性自动处理
}

onMounted(() => {
    getAllTutoring()
})
</script>

<style scoped>
.tutoring-list {
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tutoring-card {
    margin-bottom: 20px;
}

.tutoring-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.teacher-name {
    font-weight: bold;
}

.description {
    color: #666;
    margin: 10px 0;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    color: #666;
}

.actions {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
}

.el-icon {
    font-size: 16px;
}

.teacher-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding: 8px 0;
    border-top: 1px solid #eee;
    cursor: pointer;
}

.teacher-info-header:hover {
    color: #409EFF;
}

.teacher-info-header h4 {
    margin: 0;
    color: inherit;
    font-size: 14px;
}

.teacher-info {
    margin-top: 5px;
    padding: 8px;
    background-color: #f9f9f9;
    border-radius: 4px;
}
</style> 